<template>
    <div>

        <!-- 右上角按钮 -->
        <div id="actBar">
            <el-button type="primary" icon="el-icon-arrow-down" @click="toggleTreeDirection(false)" title="树向下展示"></el-button>
            <el-button type="primary" icon="el-icon-arrow-right" @click="toggleTreeDirection(true)" title="树向右展示"></el-button>
            <el-button type="primary" icon="el-icon-d-caret" @click="expandChange" title="展开/收起树"></el-button>
        </div>

        <!-- 节点树 -->
        <div id="treeContent" :style="orgTreeStyle" @mousedown="mousedownView" @contextmenu.stop="handleDocumentContextmenu">
            <vue2-org-tree
                :data="orgTreeData"
                :horizontal="horizontal"
                :label-class-name="labelClassName"
                :collapsable="collapsable"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
            />
        </div>

        <div id="nodeDetail"  v-if="showFlowInfo">
            <node-content :nodeDetailTitle="nodeDetailTitle" :showCom="showCom"></node-content>
        </div>

        <!-- 放大缩小 -->
        <div class="zoom-box">
            <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'
    import ZoomController from '../zoom-controller.vue'
    import nodeContent from './nodeContent.vue'
    import {on,off} from '../tools.js'
    import {showLoading,hideLoading} from '../loading.js'
    export default {
        name: "",
        components: {
            ZoomController:ZoomController,
            nodeContent:nodeContent
        },
        data(){
            return {
                orgTreeData: {
                    id:{
                        id:""
                    }
                },
                horizontal:false, // 树方向 水平 垂直
                orgTreeOffsetLeft: 0,
                orgTreeOffsetTop: 0,
                initPageX: 0,
                initPageY: 0,
                oldMarginLeft: 0,
                oldMarginTop: 0,
                labelClassName: "bg-default",//选择框颜色
                zoom: 100,
                nodeDetailTitle:'test-title',
                collapsable: true,//是否折叠
                showCom: false,
                canMove: false,//是否移动
                expandAll: false,//是否全部展开
                showFlowInfo: false,//是否打开节点详情
                currentContextMenuId: {
                    id: "",
                    clickId: ""
                },
                rightClickMenu:[
                    {
                        label:"新建节点",
                        key:"new"
                    },
                    {
                        key: 'delete',
                        label: '删除节点'
                    },
                    {
                        key: 'edit',
                        label: '编辑节点'
                    },
                    {
                        key: 'see',
                        label: '查看节点'
                    },
                ]
            }
        },
        methods: {
            // 右键下拉框
            renderContent(h, data) {
                return (
                    <div
                        class= {['custom-org-node', data.children && data.children.length ? 'has-children-label' : '']}
                        on-mousedown = {event => event.stopPropagation() }
                        on-contextmenu = {this.contextmenu.bind(this, data)}>
                        {data.label}
                        <el-dropdown trigger = "custom" class= "context-menu" visible = {this.currentContextMenuId.clickId == data.id.clickId}
                            nativeOn-click = {this.handleDropdownClick}
                            style = {{transform: `scale(${this.treeContentScale}, ${this.treeContentScale})`}}
                            v-click-outside = {this.closeMenu}>
                            <span></span >
                            <el-dropdown-menu
                                class="right-menu"
                                slot = "dropdown"
                                style = {{display: this.currentContextMenuId.clickId == data.id.clickId ? 'block' : 'none'}}>
                                {
                                    this.rightClickMenu.map(item => {
                                        if (item.key == "delete" && this.currentContextMenuId.id == localStorage.getItem('clickNodeId')) {
                                            return false;
                                        } else {
                                            return (<el-dropdown-item nativeOn-click = {this.handleContextMenuClick}  name = {item.key}>
                                            {item.label}
                                        </el-dropdown-item>)
                                        }
                                    })
                                }
                            </el-dropdown-menu >
                        </el-dropdown>
                    </div>
                )
            },

            //切换树方向
            toggleTreeDirection(d){
                this.horizontal = d;
            },

            //点击右上角图标展开树
            expandChange(){
                this.expandAll = !this.expandAll;
                this.toggleExpand(this.orgTreeData, this.expandAll);
            },

            //点击树展开
            onExpand(data) {
                if ("expand" in data) {
                    data.expand = !data.expand;
                    if (!data.expand && data.children) {
                        this.collapse(data.children);
                    }
                } else {
                    this.$set(data, "expand", true);
                }
                if (data.expand) {
                    data.children = [];
                }
                this.getChildrenData(data, data.id)
            },

            //展开
            collapse(list) {
                var _this = this;
                list.forEach(function (child) {
                    if (child.expand) {
                        child.expand = false;
                    }
                    child.children && _this.collapse(child.children);
                });
            },

            //展开/收起 所有树节点
            toggleExpand(data, val) {
                var _this = this;
                if (Array.isArray(data)) {
                    data.forEach(function (item) {
                        _this.$set(item, "expand", val);
                        if (item.children) {
                            _this.toggleExpand(item.children, val);
                        }
                    });
                } else {
                    if (data.children[0].label) {
                        this.$set(data, "expand", val);
                        if (data.children) {
                            _this.toggleExpand(data.children, val);
                        }
                    }
                }
            },

            //点击节点
            onNodeClick(e, data) {
                console.log("click node");
                this.$emit('onNodeClick',e,data)
            },

            // 鼠标按下
            mousedownView (event) {
                this.canMove = true
                this.initPageX = event.pageX
                this.initPageY = event.pageY
                this.oldMarginLeft = this.orgTreeOffsetLeft
                this.oldMarginTop = this.orgTreeOffsetTop
                on(document, 'mousemove', this.mousemoveView)
                on(document, 'mouseup', this.mouseupView)
            },

            // 鼠标拖动
            mousemoveView (event) {
                if (!this.canMove) return
                const {pageX, pageY} = event
                this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX
                this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY
            },

            //鼠标抬起
            mouseupView () {
                this.canMove = false
                off(document, 'mousemove', this.mousemoveView)
                off(document, 'mouseup', this.mouseupView)
                return false
            },

            //右键节点事件
            contextmenu (data, $event) {
                console.log("$event:",$event);
                let event = $event || window.event;
                event.preventDefault
                    ? event.preventDefault()
                    : (event.returnValue = false)

                this.currentContextMenuId = {
                    id: data.id.id,
                    clickId: data.id.clickId
                };
            },

            // 右键下拉菜单的点击事件
            handleContextMenuClick(data){
                this.showFlowInfo = true;
                this.nodeDetailTile = data.target.innerText;
            },

            handleDocumentContextmenu () { //右键菜单
                this.canMove = false
            },

            //关闭右键菜单
            closeMenu () {
                this.currentContextMenuId = {
                    id: "",
                    clickId: ""
                }
            },

            handleDropdownClick (event) {
                console.log("event:",event)
                event.stopPropagation()
            },

            //获取子节点数据
            getChildrenData(setList,id){
                axios.get('../../static/tree.json')
                    .then(res =>{
                        setList.children.push(res.data);
                        console.log("res:",res);
                    })
                    .catch(error =>{
                        console.log("error:",error);
                    })
            },

            //关闭模态框
            closeDialog(dialogName){
                console.log("dialogName:",dialogName);
                this[dialogName]=false;
            },

        },

        computed: {
            treeContentScale () {
                return this.zoom / 100
            },

            orgTreeStyle () {
                return {
                    transform: `translate(-25%, -25%) scale(${this.zoom / 100}, ${this.zoom / 100})`,
                    marginLeft: `${this.orgTreeOffsetLeft + 300}px`,
                    marginTop: `${this.orgTreeOffsetTop + 200}px`
                }
            }
        },

        created(){
            window.sessionStorage.setItem("h",1);
            const status = window.sessionStorage.getItem('h');
            if(status){
                if(status == "0"){
                    this.showCom = true;
                    this.nodeDetailTitle = "流程节点信息";
                    this.rightClickMenu = [{key:"see",label:"查看节点"}]
                }else {
                    this.showCom = false;
                    this.nodeDetailTitle = "流程节点信息"
                    if(status == "1"){
                        this.rightClickMenu = [{key:"edit",label:"编辑节点"},{key:"delete",label:"删除节点"}];

                    }else {
                        this.rightClickMenu = [{key:"edit",label:"编辑节点"},{key:"delete",label:"删除节点"},{key:"add",label:"新增节点"}];
                        this.nodeDetailTitle = "新增节点"
                    }
                }
            }
        },
        mounted () {
            this.orgTreeData = {//树的数据
                id: {
                    nodeId: 1-1,
                    preNodeId: 1,
                    id: 2
                },
                label:"test",
                children: [
                    {
                        id: {
                            nodeId: '123',
                            id: '123'
                        },
                        label: '和美1',
                        children: []
                    }
                ]
            }
            this.getChildrenData();
            on(document, 'contextmenu', this.handleDocumentContextmenu)
        },
        beforeDestroy () {
            off(document, 'contextmenu', this.handleDocumentContextmenu)
        },
    }
</script>
<style lang="less"  >
    #actBar{
        width: 200px;
        height: 80px;
        z-index: 999;
        position: fixed;
        top: 20px;
        right: 20px;
        background: #ffffff;
    //box-shadow: 1px 1px 4px 0 #0a0a0a2e;
    .el-button{
        float: left;
        margin:20px 0 0 10px;
    }
    .el-select{
        float: left;
        margin-top: 20px;
        margin-left: 10px;
        border-radius: 3px;
        width: 135px;
    input,i{
        background: #409EFF;
        border-color: #409EFF;
        color: #FFF;
    }
    }
    }
    #treeContent{
        margin-top: 100px;
    }
    #nodeDetail{
        position: fixed;
        top: 0;
        right: 0;
        background: white;
        width: 80%;
        height: 100%;
        border: 1px solid #ccc;
        z-index: 1999;
        border-radius: 3px 0 0 3px;
    .el-input{
        width: 100%;
    }
    .el-pagination__editor.el-input{
        width: 50px;
    }
    .info{
    .title{
        padding-left: 10px;
        border-bottom: 1px solid #ccc;
        height: 30px;
        line-height:30px;
    .el-icon-close{
        position: absolute;
        top: 7px;
        right: 10px;
        cursor: pointer;
    }
    }
    }
    .el-form-item__label{
        text-align: center
    }
    .hasMust .el-form-item__label::before{
        content: "*";
        color: red;
    }
    .el-form-item__content{
        margin-right: 30px;
    .el-radio{
        float: left;
        margin-top: 14px;
    }
    }
    .el-collapse-item__content{
    .el-button{
        float: left;
        margin-left: 6%;
    }
    }
    .el-form-item{
        margin-bottom: 5px;
    }
    .el-select{
        width: 100%;
    }
    .upload-demo{
        float: left;
        width: 270px;
    .el-upload{
        margin-left: -189px;
    }
    .el-upload__tip{
        text-align: left;
    }
    .el-upload-list{
        margin-left: -22px;
    }
    }

    .content{
        overflow: auto;
        height: calc(100vh - 30px);
    }
    .el-collapse{
    .el-form-item__content{
        position: relative;
    .el-input,.el-textarea{
        width: 85%;
    }
    .el-checkbox{
        width: 36px;
    }
    .el-icon-close{
        position: absolute;
        top:13px;
        left: -23px;
        color: #1B9BFC;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    }
    }
    .dialog-footer{
        margin-top: 40px;
    }
    .dialog-footer>button{
        float: right;
        margin: -20px 10px 0 10px;
    }
    .content-footer>button{
        float: right;
        margin: 0 10px;
    }
    .nodeSelectItem{
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
    }
    .el-table::before{
        height: 0;
    }
    .modalSearch{
        float: right;
        font-weight: 600;
    .el-input{
        width: 160px;
        height: 30px;
        margin-bottom: 10px;
        margin-left: 10px;
    .el-input__inner{
        height: 30px;
        border-radius: 50px;
    }
    }
    }
    .el-dialog__header{
        text-align: left;
    }
    }
    #nodeModal{
    .el-table{
        height: 300px;
        overflow: auto;
    }
    }
    #contextMenu{
    &.dropdownShow{
         display: block !important;
     }
    &.dropdownNone{
         display: none  !important;
     }
    list-style: none;
    padding: 0;
    background: white;
    color: #000;
    border: 1px solid #ccc;
    li:hover{
        background: #ccc;
        cursor: pointer;
    }

    }
    .zoom-box{
        position: fixed;
        right: 30px;
        bottom: 30px;
        z-index: 999;
    }
    .org-tree-node-label {
        white-space: nowrap;
    }
    .org-tree-node-label-inner{
        background: #738699;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        word-wrap: none;
        white-space: nowrap;
        border-radius: 4px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        padding:0 !important;
    }
    .custom-org-node{
        padding:10px 15px;
    }
    .nodeEntryShowInput{
        width: 95%;
        margin-left: 5%;
    }
    .wildcardQuestionResultSuccess{
        color: green;
        line-height: 48px;
        text-align: left;
        padding-left: 10px;
    }
    .wildcardQuestionResultError{
        color: red;
        line-height: 48px;
        text-align: left;
        padding-left: 10px;
    }
    .bg-white {
        background-color: white;
        color: #000;
    }
    .bg-orange {
        background-color: orange;
    }
    .bg-gold {
        background-color: gold;
    }
    .bg-gray {
        background-color: gray;
    }
    .bg-lightpink {
        background-color: lightpink;
    }
    .bg-chocolate {
        background-color: chocolate;
    }
    .bg-tomato {
        background-color: tomato;
    }
    .bg-default{
        background-color: #738699;
    }
    .bg-eee{
    input,textarea{
        background-color: #eee !important;
        color: #000 !important;
    }
    background-color: #eee;
    }
    .isDelete{
        background-color: #aaa;
    }

    .el-select-dropdown{
        z-index: 99999999999999999 !important;
    }
    .el-dropdown{
        z-index: 999999999999999999 !important;
    }
    .el-form-item .el-checkbox.is-bordered{
        padding: 11px 20px 9px 10px
    }

    ::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #ccc;
    }
    ::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

</style>
